<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>PetUI 测试网页</title>
    <meta content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" name="viewport">
    <script src="./PetUI.js"></script>
    <script src="./Pet-ui.js"></script>
    <link link rel="stylesheet" type="text/css" href="./Pet-ui.css">
    </style>
    <script>
        var Exp = new PetExpand();
        window.onload = function () {
            PetUI('div', { CSS: 'margin-top:10px' }).Child().innerText = "平台: " + (Exp.IsPC() ? "PC测试" : "移动端测试");
            PetUI('div', { CSS: 'margin-top:10px' }).Child().innerText = "事件模式: " + (Exp.HasTouch() ? "触摸支持" : "鼠标支持");
            /**
             *  测试代码
            */
            // 按钮测试
            PetUI('div', { CSS: 'margin-top:10px' }).Child().innerText = "按钮测试";
            var div = PetUI('div', { CSS: 'margin-top:10px' },
                PetUI.Button("默认样式"),
                PetUI.Button("颜色样式"), { Class: ["Red", "HoverGray"] },
                PetUI.Button("阴影样式"), { Class: "Shadow" },
                PetUI.Button(""), { Class: ["Arrows"], innerHTML: "<span>箭头动画</span>" }
            ).Child();
            // 选择按钮
            PetUI('div', { CSS: 'margin-top:10px' }).Child().innerText = "选择按钮";
            var Selection = PetUI('div', { CSS: 'margin-top:10px' },
                PetUI.Selection("默认样式"), { Checked: true, CSS: "display:inline" },
                PetUI.Selection("样式一"), { Class: PetUI.Selection.style[0], CSS: "display:inline", Checked: true },
                PetUI.Selection("样式二"), { Class: PetUI.Selection.style[1], CSS: "display:inline", Checked: true },
                PetUI.Selection("样式三"), { Class: PetUI.Selection.style[2], CSS: "display:inline", Checked: true },
                PetUI.Selection("样式四"), { Class: PetUI.Selection.style[3], CSS: "display:inline", Checked: true },
                PetUI.Selection("样式五"), { Class: PetUI.Selection.style[4], CSS: "display:inline", Checked: true },
                PetUI.Selection("发光效果"), {
                    Click: ($) => {
                        var nodes = Selection.childNodes;
                        for (var i in nodes) {
                            if (nodes.hasOwnProperty(i)) {
                                nodes[i].Class("CloseGlowing", !$.Checked);
                            }
                        }
                    }
                }
            ).Child();
            // 进度条测试
            PetUI('div', { CSS: 'margin-top:10px' }).Child().innerText = "进度条测试";
            var PetUIdiv = PetUI('div', { CSS: 'margin-top:10px' },
                PetUI.ProgressBar('200px', 30),
                PetUI.ProgressBar('200px', 40), { ClassColop: 'color-1' },
                PetUI.ProgressBar('200px', 50), { ClassColop: 'color-2' },
                PetUI.ProgressBar('200px', 60), { ClassColop: 'color-3' },
                PetUI.ProgressBar('200px', 70), { ClassColop: 'color-4' },
                PetUI.ProgressBar('200px', 80), { ClassColop: 'color-5' },
                PetUI.ProgressBar('200px', 60), { ClassColop: 'color-6' },
                PetUI.ProgressBar('200px', 70), { ClassColop: 'color-7' },
                PetUI.ProgressBar('200px', 80), { ClassColop: 'color-8' },
                PetUI.Selection("发光效果"), {
                    CSS: "display:inline",
                    Click: ($) => {
                        var nodes = PetUIdiv.childNodes;
                        for (var i in nodes) {
                            if (nodes.hasOwnProperty(i)) {
                                nodes[i].Class("CloseGlowing", !$.Checked);
                            }
                        }
                    }
                },
                PetUI.Selection("开启动画"), {
                    CSS: "display:inline",
                    Click: ($) => {
                        var nodes = PetUIdiv.childNodes;
                        for (var i in nodes) {
                            if (nodes.hasOwnProperty(i)) {
                                nodes[i].Class("BackgroundAnime", $.Checked);
                            }
                        }
                    }
                }
            ).Child();
            // 圆形进度条
            PetUI('div', { CSS: 'margin-top:10px' }).Child().innerText = "圆形进度条";
            var Pbr = PetUI.ProgressBarRound(50).Child();
            // 进度条动画
            PetUI('div', { CSS: 'margin-top:10px' }).Child().innerText = "进度条动画";
            var Pb = PetUI.ProgressBar('200px');
            Pb.ClassColop('color-5');
            PetUI('div', { CSS: 'margin-top:10px' },
                PetUI.Button("20%"), {
                    Click: (e) => {
                        Pb.Percent(20)
                    }
                },
                PetUI.Button("90%"), {
                    Click: (e) => {
                        Pb.Percent(90)
                    }
                },
                Pb
            ).Child();
            // 导航栏
            var Navbar = PetUI.Navbar().Child(true);
            var caid = Navbar.Submenu("菜单一").Submenu();
            var caid1 = Navbar.Submenu("菜单二");
            var caid3 = Navbar.Submenu("菜单三");
            var n1 = caid("父菜单一").Submenu();
            var n2 = caid("父菜单二").Submenu();
            var n1_1 = n1("子级菜单一").Submenu();
            var n1_2 = n1("子级菜单二").Submenu();
            // 提示
            PetUI('div', { CSS: 'margin-top:10px' }).Child().innerText = "提示";
            var Prompt = PetUI.Button("提示").Child();
            Prompt.Click = (e) => {
                PetUI.Prompt("提示喵~")
            };
        };
    </script>
</head>

<body>
</body>

</html>